<script  lang="ts" setup>

    import {
        SearchOutlined,
    } from '@ant-design/icons-vue';

    // @ts-ignore
    import {reactive,onMounted} from 'vue'
    // @ts-ignore
    import {getProductList} from '@/service/product/index.ts'
    // @ts-ignore
    import {globalEnv} from '@/utils/index.ts'

    const state=reactive({
        env:globalEnv(),
        loading:false,
        title:'代码模板',
        name:'',
        productList:[],
        pageSize:3,
        page:1,
        total:0,
        pageSizeOptions:['3', '6', '9']
    })
    const searchProductAction=async ()=>{
        state.loading=true
        try{

            const res=await getProductList({
                name:state.name,
                pageSize:state.pageSize,
                page:state.page
            });
            console.log('res',res)
            state.productList=res.data.data
            state.total=res.data.total
        }
        catch (e) {
            console.error(e)
            state.productList=[]
            state.total=0
        }
        finally {
            state.loading=false
        }
    };

    const searchBtn=()=>{
        searchProductAction()
    }

    const changePage=(page,pageSize)=>{
        state.page=page
        state.pageSize=pageSize
        searchBtn()
    }

    const mediaSrc=(id)=>{
        const url=state.env.VITE_APP_HOST+`/cloudApi/api/media/render?id=${id}`;
        return url
    }
    onMounted(()=>{
        searchBtn()
    })
</script>
<template>
<!--    <div>-->
<!--        {{state.title}}-->
<!--    </div>-->
    <div>
        <a-row>
            <a-col :span="12">
                <a-input v-model:value="state.name" placeholder="输入名称搜索" allowClear />
            </a-col>
            <a-col :span="12" style="padding-left: 20px">
                <a-button type="primary" @click="searchBtn">
                    <search-outlined />
                    查询</a-button>
            </a-col>
        </a-row>
    </div>
    <div style="margin-top: 10px;margin-bottom: 10px">
        <a-spin :spinning="state.loading">
        <div v-for="(item,index) in state.productList" :key="index" style="display: inline-block;margin: 2px">
            <a-card hoverable style="width: 240px;">
                <template #cover>
                    <a-image :alt="item.title" :src="mediaSrc(item.img_id)" />
                </template>
                <a-card-meta :title="item.title">
                    <template #description>

                        <p>{{item.description}}</p>

                    </template>
                </a-card-meta>
                <div>
                    <a :href="mediaSrc(item.mov_id)" target="_blank">打开讲解视频</a>
                </div>
            </a-card>
        </div>
            <div style="margin-top: 10px" v-if="state.productList.length">
                <a-pagination showTotal showSizeChanger v-model:current="state.page" :total="state.total" :pageSize="state.pageSize" :pageSizeOptions="state.pageSizeOptions" @change="changePage"/>
            </div>
            <div v-else>
                <a-empty />
            </div>
        </a-spin>
    </div>

</template>
